<template>
	<div class="app-contain">
		<head-top></head-top>
		<div class="bg-fa of">
			<section class="container  mt40">
				<div class="lr-box">
					<article class="lr-e-box">
						<section class="lr-e-wrap"> 	
							<header class="comm-title">
								<h2 class="tac clearfix"> <span class="c-333">欢迎登录</span> </h2> </header>
							<section class="lr-ul-wrap">
								<ul class="bm-lr-ul">
									<li>
										<div class="bm-lr-jy-box" id="login_account_div" v-show="showValidateMobile">
											<section class="hLh30 ml10 mr10 pr"> <big @click="showValidateMobile = false" title="关闭" class="bm-close">x</big>
												<div class="DT-arrow"><em>◆</em><span>◆</span></div> <em class="icon18 login-err-icon"></em><span class="fsize12 vam ml5" id="login_account_error">请输入正确的用户名/邮箱/手机号！</span> </section>
										</div> 
										<label>
											<em class="login-icon"></em><input type="text" placeholder="用户名/邮箱/手机号" id="userEmail" v-model="loginForm.mobile"></label> </li>
									<li>
										<div class="bm-lr-jy-box " id="login_password_div" v-show="showValidatePass">
											<section class="hLh30 ml10 mr10 pr"> <big @click="showValidatePass = false" class="bm-close">x</big>
												<div class="DT-arrow"><em>◆</em><span>◆</span></div> <em class="icon18 login-err-icon"></em><span class="fsize12 vam ml5" id="login_password_error">请输入正确的密码！</span> </section>
										</div> 
										<label><em class="pawd-icon"></em><input  type="password" id="userPassword" name="" value="" placeholder="密码" v-model="loginForm.password"></label> </li>
								</ul>
								<div class="hLh30 mt10 pl40" style="text-align: left;"> 
									<span> 
										<label> 
											 <el-checkbox name="autoThirty" label="自动登录 "></el-checkbox>
											<!--<small class="c-999 fsize12">自动登录</small>-->
										</label> 
										<small class="ml10">
											<router-link to="/forgetPassword" class="c-orange fsize14">忘记密码？</router-link>
										</small> 
									</span> 
								</div>
								<div class="mt40">
									<a title="立即登录" class="bm-lr-btn" href="javascript:;" @click="login">立即登录</a>
								</div>
							</section>
						</section>
					</article>
				</div>
			</section>
		</div>
		<foot-bootom></foot-bootom>
	</div>

</template>

<script>
	import { login } from '@/api/login'
	import { validateMobile } from '@/utils/validate'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	export default {
		components: { //引入组件
			headTop,
			footBootom

		},
		name: 'home',
		data() {
			return {
				showValidateMobile: false,
				showValidatePass: false,
				loginForm: {
					mobile: '',
					password: '',
					loginFrom:'WEB'
				},
				isCurrentHtml:true//用于销毁键盘事件
				
			}
		},
		mounted(){
			var that = this;
			this.isCurrentHtml = true;
			document.onkeydown=function(evt){
				let events = window.event || evt;
				var key= events.keyCode;
				if(key==13&&that.isCurrentHtml){
					that.login();
				}
			}
		},
		methods:{
			login() {
				if(!validateMobile(this.loginForm.mobile)) {
					this.showValidateMobile = true;
					return false;
				};
				if(this.loginForm.password == "") {
					this.showValidatePass = true;
					return false;
				};
				this.$store.dispatch('Login', this.loginForm).then(() => {
					let userInfo = this.$store.getters.getStorageInfo;
					if(userInfo){
						this.$router.push({
							path: '/'
						});
					}	
				}).catch(() => {

				})

			},
			
		},
		beforeRouteLeave(to, from, next) {

			this.isCurrentHtml = false;
			next();
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'login';

</style>